<template>
  <!-- 预警决策主页-十八项反措模块 -->
  <div class="warringeighteen">
    <div class="warringeighteen-left">
      <div class="warringeighteen-left-top">
        <div class="warringeighteen-left-top-item" @click="goEighteenPage('是')" >
          <!-- 满足 -->
          <SatisfyBar :satisfy="satisfy" :maxValue="maxValue" />
        </div>
        <div class="warringeighteen-left-top-item" @click="goEighteenPage('否')" >
          <!-- 不满足 -->
          <DissatisfyBar :dissatisfy="dissatisfy" :maxValue="maxValue" />
        </div>
      </div>
      <div class="lenged">
        <div class="lenged-item">
          <div class="colorbox"></div>
          <div class="text">满足</div>
        </div>
        <div class="lenged-item">
          <div class="colorbox2"></div>
          <div class="text">不满足</div>
        </div>
      </div>
    </div>
    <div class="warringeighteen-right">
      <EighteenPie :annualStatistics="annualStatistics" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SatisfyBar from "../SatisfyBar/index.vue";
import DissatisfyBar from "../DissatisfyBar/index.vue";
import EighteenPie from "../EighteenPie/index.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
@Component({
  components: {
    SatisfyBar,
    DissatisfyBar,
    EighteenPie,
  },
})
export default class WarningEighteen extends Vue {
  // 所属地市
  // private localCity: string = "8a1ea5c64bdebad1014bdebc55c80162";

  // 所属地市
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }

  // 十八项反措年统计
  private annualStatistics: object = [];
  // 十八项反措统计满足不满足
  private satisfy = 0;
  private dissatisfy = 0;
  private maxValue = 0;
  private dataList = {
    satisfy: "",
    dissatisfy: "",
    lastyear: "",
    thisyear: "",
    nextyear: "",
  };

  // 跳转到十八项反措二级页面
  private goEighteenPage(isSatisfy: any) {
    // console.log("isSatisfy:",isSatisfy);
    // this.$router.push({
    //   name: "countermeasuresindex",
    //   params: {
    //     isSatisfy: isSatisfy,
    //   },
    // });
     this.$router.push({
      name: "countermeasuresindex",
      query: {
        isSatisfy: isSatisfy,
      },
    });
  }

  private init() {
    var localCity = "";
    if (this.CompanyList && this.CompanyList[0] && this.CompanyList[0].code) {
      localCity = this.CompanyList[0].code;
    } else {
      localCity = "8a1ea5c64bdebad1014bdebc6047087b";
    }
    // 获取十八项反措统计满足不满足
    (this as any).$services
      .eighteenCounterMeasuresStatistics({
        method: "get",
        data: { localCity: localCity },
      })
      .then((result: any) => {
        // console.log("十八项反措统计满足不满足:", result);
        this.dataList.satisfy = result.data[0].ylsfc;
        this.dataList.dissatisfy = result.data[0].wlsfc;
        this.satisfy = result.data[0].ylsfc;
        this.dissatisfy = result.data[0].wlsfc;
        this.maxValue =
          Number(result.data[0].ylsfc) > Number(result.data[0].wlsfc)
            ? result.data[0].ylsfc
            : result.data[0].wlsfc;
        // console.log("this.satisfy,this.dissatisfy,this.maxValue:",this.satisfy,this.dissatisfy,this.maxValue)
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取十八项反措年统计
    (this as any).$services
      .annualStatistics({
        method: "get",
        data: { localCity: localCity },
      })
      .then((result: any) => {
        // console.log("十八项反措年统计:", result);
        this.dataList.lastyear = result.data[0].count;
        this.dataList.thisyear = result.data[1].count;
        this.dataList.nextyear = result.data[2].count;
        this.annualStatistics = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  created() {
    this.init();
  }
}
</script>

<style lang='scss' scoped>
.warringeighteen {
  display: flex;
  width: 100%;
  height: 100%;
  &-left {
    width: 50%;
    // background-color: grey;
    display: flex;
    flex-direction: column;
    &-top {
      width: 100%;
      height: 80%;
      display: flex;
      &-item {
        width: 50%;
        height: 100%;
        // background-color: pink;
      }
    }
    .lenged {
      width: 100%;
      height: 10%;
      // flex: 1;
      display: flex;
      // background-color: greenyellow;
      margin-top: 0.1rem;
      padding-left: 10%;
      &-item {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .colorbox {
          width: 20%;
          height: 60%;
          background-color: #f89c27;
        }
        .colorbox2 {
          width: 20%;
          height: 60%;
          background-color: #f52a1f;
        }
        .text {
          width: 50%;
          // height: 80%;
        }
      }
    }
  }
  &-right {
    width: 50%;
    // background-color: hotpink;
  }
}
</style>
